<!DOCTYPE html>
<html>
<head>
<title>router</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* This file is deliberately empty */
</style>
</head>
<body>
<h1>第二章：目录与路由</h1>
<h2>文档目录</h2>
<p>文档目录支持最大3个层级，这通常也满足了文档编写的需求。</p>
<h2>文档目录位置</h2>
<pre>
	<xmp>
<ul class="nav menu" id="side-menu">
    <li class="sidebar-search" style="display: none;">
        <div class="input-group custom-search-form">
            <input type="text" class="form-control" placeholder="输入关键字搜索...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
        <!-- /input-group -->
    </li>
    
    <!-- 目录列表 -->
    ...
</ul>
	</xmp>
</pre>
<h3>添加一个一级目录</h3>
<pre>
	<xmp>
<li><a href="#/start"><i class="fa fa-file-text fa-fw"></i> 第一章：入门</a></li>
	</xmp>
</pre>
<h3>添加一个二级级目录</h3>
<pre>
	<xmp>
<li>
  <a href="javascript:void(0);"><i class="fa fa-book fa-fw"></i> 二级目录<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li><a href="#/a"><i class="fa fa-file-text fa-fw"></i> 二级目录1</a></li>
      <li><a href="#/b"><i class="fa fa-file-text fa-fw"></i> 二级目录2</a></li>
    </ul>
</li>
	</xmp>
</pre>
<h3>添加一个三级级目录</h3>
<pre>
	<xmp>
<li>
  <a href="javascript:void(0);"><i class="fa fa-book fa-fw"></i> 三级目录<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li><a href="#/c"><i class="fa fa-file-text fa-fw"></i> 三级目录1</a></li>
      <li>
        <a href="#/d"><i class="fa fa-book fa-fw"></i> 三级目录2<span class="fa arrow"></span></a>
        <ul class="nav nav-third-level">
          <li><a href="#/e"><i class="fa fa-file-text fa-fw"></i> 三级目录1-1</a></li>
        </ul>
      </li>
    </ul>
</li>
	</xmp>
</pre>
<h2>路由</h2>
<p>在添加完目录后，在点击目录的时候需要找到我们所需要定位的页面，这个时候就需要使用到路由。</p>
<h3>配置路由</h3>
<pre>
//路由初始化
angular.module('wrapper',['ngRoute']).config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/a',{templateUrl:'./a.html'})
    .when('/b',{templateUrl:'./b.html'})
    ...
    .otherwise({redirectTo:'/'});
}]);
</pre>
<h3>路由跳转</h3>
<p>在很多情况下，可能需要从某个路由跳转到另外一个路由，比如在浏览文档其他章节，想回到首页时，这个时候就需要使用到路由跳转，比如：设置点击标题跳转到首页，设置路由跳转很简单只需要在标签上加上属性： <strong>ng-click=&quot;goToRoute('路由')&quot;</strong> 即可，如：<strong>ng-click=&quot;goToRoute('#/start')&quot;</strong></p>
<pre>
	<xmp>
<a ng-click="goToRoute('#/start')" class="navbar-brand" href="javascript:void(0);">MarkdownPad 文档模板编写指南</a>
	</xmp>
</pre>
<p><br/><br/><br/><br/></p>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
